<template>
    <div class="page page-info page_hasHeader">
        <o-header :title="pageTitle"
                  showReturn>
        </o-header>
        <group>
            <cell title="昵称"
                  :value="userInfo.name"
                  is-link
                  @click.native=" showSwitch.name = true ">
            </cell>
            <cell title="性别"
                  :value="userInfo.gender"
                  is-link
                  @click.native=" showSwitch.gender = true ">
            </cell>
            <datetime title="生日"
                      :min-year="1900">
            </datetime>
            <x-address title="地址"
                       :list="addressList"
                       v-model="userInfo.birthday">
            </x-address>
            <x-dialog v-model="showSwitch.gender"
                      hide-on-blur>
                <radio v-model="userInfo.gender"
                       :options="genderOptions" 
                       @click.native=" showSwitch.gender = false ">
                </radio>
            </x-dialog>
            <x-dialog v-model="showSwitch.name"
                      class="dialog-name"
                      hide-on-blur>
                <group title="字数2-10之间" 
                       class="dialog-name_input">
                    <x-input v-model="userInfo.name"
                             required
                             is-link
                             :show-clear="false">
                    </x-input>
                </group>
                <x-button type="primary">确认</x-button>
                <o-icon name="close-circled"
                        :size="22"
                        class="dialog-name_close"
                        @click.native="showSwitch.name=false"></o-icon>
            </x-dialog>
        </group>
        <group>
            <x-textarea title="个人简介" 
                        :rows="2">
            </x-textarea>
        </group>
    </div>
</template>

<script>
import { ChinaAddressV4Data, TransferDomDirective as TransferDom } from 'vux'
export default {
    name: 'register',
    data(){
        return{
            pageTitle: '个人信息',
            addressList: ChinaAddressV4Data,
            userInfo: {
                name: '欧燕',
                gender: '',
                address: '',
                birthday: undefined,
                intdc: ''
            },
            
            showSwitch: {
                gender: false,
                name: false
            },

            genderOptions: ["男", "女"]

        }
    },
    directives: {
        TransferDom
    },
}

</script>

<style lang="less">
    .dialog-name .weui-dialog{
        padding: 30px 20px 20px;
        .weui-cells{
            margin: 0 0 26px;
            &::before{
                display: none;
            }
        }
        
    }
    .dialog-name{
        &_header{
            font-size: 18px;
        }
        &_close{
            position: absolute;
            top: 8px;
            right: 12px;
            color: @darkPrimaryColor;
        }
    }
</style>
